<template>
  <div>
    <h1>vue体验</h1>
    <h2>{{ msg }}</h2>
    <input type="text" v-model="msg" />
    <div>
      <p>
        展示user得值：<i>{{ user.name }}</i>
      </p>
    </div>
    <!-- 这是element-ui组件不用管https://element.eleme.cn/#/zh-CN/component/divider -->
    <el-divider></el-divider>
    <h1>methods定义函数</h1>
    <p>场景1：</p>
    <!-- 这是element-ui组件不用管，文档https://element.eleme.cn/#/zh-CN/component/button -->
    <el-button type="primary" size="small" @click="handClick"
      >点击事件</el-button
    >
    <p>场景2：</p>
    <p>num1和num2的和：{{ getTotal1() }}</p>
    <p>num1和num2的和用参数传值计算：{{ getTotal2(num1, num2) }}</p>
    <el-divider></el-divider>
    <h2>v-text和v-html</h2>
    <p>
      v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出,
      一般v-text和插值语法相似https://blog.csdn.net/fushan2012/article/details/123067394
    </p>
    <div>
      <p>v-text：<span v-text="textStr"></span></p>
      <p>v-html：<span v-html="htmlStr"></span></p>
    </div>
    <el-divider></el-divider>
    <h2>v-show和v-if</h2>
    <p>
      v-if：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回
      truthy 值的时候被渲染。 v-show：v-show 的元素始终会被渲染并保留在 DOM
      中。v-show 只是简单地切换元素的 CSS property
      display。https://blog.csdn.net/qq_44872688/article/details/123620096?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166659080316782388040833%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166659080316782388040833&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-123620096-null-null.142^v59^pc_search_tree,201^v3^add_ask&utm_term=v-show%E5%92%8Cv-if&spm=1018.2226.3001.4187
    </p>
    <!-- v-show控制元素（标签）的显示隐藏 -->
    <!-- 语法：v-show="数据|js表达式" -->
    <div v-show="isShow">我是v-show</div>
    <!-- v-if 控制元素（标签）的创建移除  -->
    <!-- 语法：v-if="数据|js表达式" -->
    <div v-if="isShow">我是v-if</div>
    <el-button type="primary" size="small" @click="changeShow"
      >切换v-show,v-if展示,打开浏览器开发工具看dom结构，v-show的dom元素还在</el-button
    >
    <el-divider></el-divider>
    <h2>dom元素属性写法</h2>
    <div :title="title">我是一个DIV</div>
    <el-button type="primary" size="small" @click="changeTitle"></el-button>
    <el-divider></el-divider>
    <h2>v-for的用法</h2>
    <div v-for="i in 4" :key="i">第{{ i }}个div</div>
    <hr />
    <!-- v-for="item in list" -->
    <div v-for="item in list" :key="item.id">名字：{{ item.name }}</div>
    <hr />
    <!--  v-for="(item,i) in list" -->
    <div v-for="(item, index) in list" :key="item.id">
      名字：{{ item.name }} 年龄：{{ item.age }} 索引{{ index }}
    </div>
    <!--  v-for="(v,k,i) in obj" -->
    <div v-for="(value, key, index) in obj" :key="key">
      值：{{ value }} 键：{{ key }} 索引：{{ index }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'day1-page',
  data() {
    return {
      msg: 'hi vue',
      user: {
        // 如果模板需要使用必须显性声明，但是可以不给值
        name: '张三'
      },
      num1: 1,
      num2: 2,
      textStr: '<b>我是textStr</b>',
      htmlStr: '<b>我是textStr</b>',
      isShow: true,
      title: '标题',
      // 数组
      list: [
        { id: 1, name: 'tom', age: 10 },
        { id: 2, name: 'tony', age: 12 }
      ],
      // 对象
      obj: {
        name: 'tom',
        age: 10
      }
    }
  },
  methods: {
    // 1.点击事件函数,改变data里面的值
    handClick() {
      this.user.name = this.user.name === '李四' ? '张三' : '李四'
    },
    // 2.函数计算返回值
    getTotal1() {
      return this.num1 + this.num2
    },
    // 3.函数返回值传参
    getTotal2(n1, n2) {
      return n1 + n2
    },
    // 切换展示
    changeShow() {
      this.isShow = !this.isShow
    },
    // 改变title
    changeTitle() {
      this.title = '1234'
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  i {
    color: red;
  }
}
</style>
